<template>
  <div :class="Bem('input-number')">
    <el-input-number
      :value="value"
      :size="$store.getters.size"
      v-bind="options"
      @change="value => $emit('change', Number(value) || 0)"
    />
  </div>
</template>

<script>
import createBem from '@Components/assets/js/utils/bem'
import { tableNamespace } from '../config'
export default {
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: [Number, String],
    options: Object
  },
  methods: {
    Bem: createBem(tableNamespace)
  }
}
</script>
<style scoped lang="scss">
@import '../variables.scss';
.#{$TableNameSpace} {
  &__input-number {
    overflow: hidden;
    .vxe-input {
      height: 24px;
      .vxe-input--inner {
        height: 24px;
      }
    }
    /deep/.el-input-number--mini {
      width: 100%;
      line-height: 22px;
      .el-input--mini .el-input__inner {
        height: 22px;
        line-height: 22px;
      }
      .el-input-number__increase,
      .el-input-number__decrease {
        line-height: 20px;
        height: 20px;
        top: 2px;
      }
      &.is-controls-right {
        .el-input-number__increase,
        .el-input-number__decrease {
          line-height: 10px;
          height: 10px;
        }
        .el-input-number__increase {
          top: 2px;
        }
        .el-input-number__decrease {
          bottom: 1px;
          top: auto;
        }
      }
    }
  }
}
</style>
